<template>
  <Table :columns="columnsInitial" :data="data"></Table>
</template>
<script>

export default {
  data() {
    return {
      dragState: {
        start: -9, // 起始元素的 index
        end: -9, // 移动鼠标时所覆盖的元素 index
        dragging: false, // 是否正在拖动
        direction: undefined, // 拖动方向
      },
      columnsInitial: [
        {
          title: 'Name',
          key: 'name',
          renderHeader: (h, params) => {
            return h(
              'div',
              {
                on: {
                  mousedown: $event => {
                    this.handleMouseDown($event, params)
                  },
                  mousemove: $event => {
                    this.handleMouseMove($event, params)
                  },
                },
                style: {
                  cursor: 'move',
                  'user-select': 'none',
                },
              },
              params.column.title
            )
          },
        },
        {
          title: 'Age',
          key: 'age',
          renderHeader: (h, params) => {
            return h(
              'div',
              {
                on: {
                  mousedown: $event => {
                    this.handleMouseDown($event, params)
                  },
                  mousemove: $event => {
                    this.handleMouseMove($event, params)
                  },
                },
                style: {
                  cursor: 'move',
                  'user-select': 'none',
                },
              },
              params.column.title
            )
          },
        },
        {
          title: 'Address',
          key: 'address',
          renderHeader: (h, params) => {
            return h(
              'div',
              {
                on: {
                  mousedown: $event => {
                    this.handleMouseDown($event, params)
                  },
                  mousemove: $event => {
                    this.handleMouseMove($event, params)
                  },
                },
                style: {
                  cursor: 'move',
                  'user-select': 'none',
                },
              },
              params.column.title
            )
          },
        },
      ],
      data: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03',
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01',
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02',
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04',
        },
      ],
    }
  },
  methods: {
    // --------------------拖拽表头的事件----------------------------
    // 按下鼠标开始拖动
    handleMouseDown(e, parames) {
      console.log("parames",parames);
      let index = parames.index - 1
      this.dragState.dragging = true
      this.dragState.start = parseInt(index)
      document.addEventListener('mouseup', this.handleMouseUp)
    },
    // 鼠标放开结束拖动
    handleMouseUp() {
      this.dragColumn(this.dragState)
      // 初始化拖动状态
      this.dragState = {
        start: -9,
        end: -9,
        dragging: false,
        direction: undefined,
      }
      document.removeEventListener('mouseup', this.handleMouseUp)
    },
    // 拖动中
    handleMouseMove(e, parames) {
      if (this.dragState.dragging) {
        let index = parseInt(parames.index - 1) // 记录起始列
        if (index - this.dragState.start !== 0) {
          this.dragState.direction = index - this.dragState.start < 0 ? 'left' : 'right' // 判断拖动方向
          this.dragState.end = parseInt(index)
        } else {
          this.dragState.direction = undefined
        }
      } else {
        return false
      }
    },
    // 拖动易位
    dragColumn({ start, end, direction }) {
      let tempData = []
      let left = direction === 'left'
      let min = left ? end : start - 1
      let max = left ? start + 1 : end
      for (let i = 0; i < this.columnsInitial.length; i++) {
        if (i === end) {
          tempData.push(this.columnsInitial[start])
        } else if (i > min && i < max) {
          tempData.push(this.columnsInitial[left ? i - 1 : i + 1])
        } else {
          tempData.push(this.columnsInitial[i])
        }
      }
      this.columnsInitial = tempData
    },
  },
}
</script>
